<template>
 <div class="iconwrap">
   <div v-for="item of list" :key="item.id">
     <img :src="item.imgUrl">
     <span>{{item.title}}</span>
   </div>
   
 </div>
</template>

<script>
export default {
  name: 'HomeIcon',
  data:function(){
    return{
      list:[
        {
          id:'01',
          imgUrl : 'https://www.517ybang.com/newhome/images/icon_chaoshi@3x.png',
          title : '生鲜超市'
        },
        {
          id:'02',
          imgUrl : 'https://www.517ybang.com/newhome/images/icon_kuwan@3x.png',
          title : '潮流酷玩'
        },
        {
          id:'03',
          imgUrl : 'https://www.517ybang.com/newhome/images/icon_muying@3x.png',
          title : '母婴用品'
        },
        {
          id:'04',
          imgUrl : 'https://www.517ybang.com/newhome/images/icon_shuma@3x.png',
          title : '科技数码'
        },
        {
          id:'05',
          imgUrl : 'https://www.517ybang.com/newhome/images/icon_shenghuo@3x.png',
          title : '居家生活'
        },
        {
          id:'06',
          imgUrl : 'https://www.517ybang.com/newhome/images/icon_lingshi@3x.png',
          title : '休闲零食'
        },
        {
          id:'07',
          imgUrl : 'https://www.517ybang.com/newhome/images/icon_yundong@3x.png',
          title : '运动户外'
        },
        {
          id:'08',
          imgUrl : 'https://www.517ybang.com/newhome/images/icon_dongman@3x.png',
          title : '游戏动漫'
        }

      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
.iconwrap
  margin-top:.3rem
  display:flex
  flex-wrap: wrap
  justify-content:space-around
  height:3rem
  div
    width:24%
    height:1.4rem
    margin-bottom:.2rem
    img
      display:block
      width:1rem
      margin:0 auto
    span
      display:block
      font-size:.24rem
      color:#3e3a39
      text-align:center
      padding-top:.15rem

</style>
